<template>
  <component
    :is="computedContentComponent"
    :common-attr="commonAttr"
    :formItem-meta-list="formItemMetaList"
    :form-data="formData"
    :meta-dynmic-config-list="searchFormItemDynmicConfigList"
  >
    <template #searchBtn><slot name="searchBtn"></slot></template>
  </component>
</template>
<script setup>
import { computed } from "vue";
import SearchFormInline from "./components/search-form-inline/index.vue";
import searchformDropdown from "./components/search-form-dropdown/index.vue";

const props = defineProps({
  commonAttr: {
    type: Object,
  },
  formItemMetaList: {
    type: Array,
  },
  formData: {
    type: Object,
  },
  searchFormItemDynmicConfigList: {
    type: Array,
  },
});
/**
 * Dropdown、Inline、Drawer
 */
const searchFormLayoutStyle = computed(() => {
  return props.commonAttr?.formLayoutStyle ?? "Dropdown";
});
const layoutStyleToComponentNameMaps = {
  Inline: SearchFormInline,
  Dropdown: searchformDropdown,
};
const computedContentComponent = computed(() => {
  return layoutStyleToComponentNameMaps[searchFormLayoutStyle.value];
});
</script>
